<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>自助售货管理后台</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body>
<div class="content-wrapper">
  <div class="content-header ">
    <div class="content-header-left mb-2">
      <h3 class="content-header-title mb-0">员工列表</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <div class="searchbox">
          <form class="form-inline">
            <div class="form-group">
              <input type="text" class="form-control"  placeholder="请填写员工用户名">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请填写手机号">
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary" id="search">查询</button>
            </div>
          </form>
        </div>
        <div class="funcbtn clearfix">
          <div class="pull-left"><a class="btn btn-info" href="新增员工.html">添加员工</a></div>
        </div>
        <div class="tablebox1">
          <table class="table">
            <thead>
              <tr>						
                <th><input type="checkbox"></th>
                <th>员工id</th>
                <th>用户名</th>
                <th>职位</th>
                <th>邮箱</th>
                <th>联系电话</th>
                <th>工资</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="showEmployeeMessage">
                
            </tbody>
          </table>
 
          <div class="page clearfix">
            <div class="pull-left">共<span id="total"></span>条记录 第 <span id="pageNum"></span> / <span id="pageCount"></span> 页</div>
            <div class="pull-right">
              <nav aria-label="..." class="pull-left">
                <ul class="pagination" id="pagination">
                  <!-- 动态生成的分页按钮将插入到这里 -->
                </ul>
              </nav>
              <div class="pull-left p-r-20  p-l-20">
                <select class="form-control">
                  <option>10条每页</option>
                </select>
              </div>
              <div class="pull-left">跳至<input type="text" value="5" class="form-control">页</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="editEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="editEmployeeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editEmployeeModalLabel">修改员工信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="editEmployeeForm">
          <div class="form-group">
            <label for="editEmpName">用户名</label>
            <input type="text" class="form-control" id="editEmpName" required>
          </div>
          <div class="form-group">
            <label for="editPosition">职位</label>
            <input type="text" class="form-control" id="editPosition" required>
          </div>
          <div class="form-group">
            <label for="editEmail">邮箱</label>
            <input type="email" class="form-control" id="editEmail" required>
          </div>
          <div class="form-group">
            <label for="editPhoneNumber">联系电话</label>
            <input type="text" class="form-control" id="editPhoneNumber" required>
          </div>
          <div class="form-group">
            <label for="editSalary">工资</label>
            <input type="number" class="form-control" id="editSalary" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="saveChanges">保存更改</button>
      </div>
    </div>
  </div>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script> 

</body>
</html>
<script>
    $(function(){
      console.log(window.sessionStorage.getItem("empName"))
            var loginMessage = window.sessionStorage.getItem("empName")
            if(loginMessage==null){
                alert("请先登录")
                window.location.href="./index.html"
            }
  onloadOk(1, "", "");
})

// 数据
function onloadOk(pageNum, empName, phoneNumber) {
  $.ajax({
    url: "http://localhost:18081/employees/selectAllByEmpNameAndPhoneNumber",
    type: "get",
    data: {
      pageNum: pageNum,
      empName: empName,
      phoneNumber: phoneNumber
    },
    success: function(data) {
      console.log(data);
      $('#total').html(data.data.total);
      $('#pageNum').html(data.data.pageNum);
      $('#pageCount').html(data.data.pages);
      var employeeMessage = data.data.list;
      $('#showEmployeeMessage').empty();
      employeeMessage.forEach(function(item) {
        var row = `<tr>
                      <td><input type="checkbox"></td>
                      <td>${item.employeeId}</td>
                      <td>${item.empName}</td>
                      <td>${item.position}</td>
                      <td>${item.email}</td>
                      <td>${item.phoneNumber}</td>
                      <td>${item.salary}</td>
                      <td>
                          <button class="btn btn-primary rev" onclick="showEditModal(${item.employeeId})">修改</button>
                          <button class="btn btn-danger del" onclick="deleteEmployee(${item.employeeId})">删除</button>
                      </td>
                  </tr>`;
        $('#showEmployeeMessage').append(row);
      });
      generatePaginationButtons(data.data.pageNum, data.data.pages);
    }
  });
}

// 生成分页按钮
function generatePaginationButtons(currentPage, totalPages) {
  var paginationHtml = '';
  if (currentPage > 1) {
    paginationHtml += `<li><a href="#" onclick="onloadOk(${currentPage - 1}, '', '')" aria-label="Previous"><span aria-hidden="true">«</span></a></li>`;
  } else {
    paginationHtml += `<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>`;
  }

  for (var i = 1; i <= totalPages; i++) {
    if (i === currentPage) {
      paginationHtml += `<li class="active"><a href="#">${i} <span class="sr-only">(current)</span></a></li>`;
    } else {
      paginationHtml += `<li><a href="#" onclick="onloadOk(${i}, '', '')">${i}</a></li>`;
    }
  }

  if (currentPage < totalPages) {
    paginationHtml += `<li><a href="#" onclick="onloadOk(${currentPage + 1}, '', '')" aria-label="Next"><span aria-hidden="true">»</span></a></li>`;
  } else {
    paginationHtml += `<li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>`;
  }
  $('#pagination').html(paginationHtml);
}
var updateId = 0;
// 显示修改模态框
function showEditModal(employeeId) {
  updateId = employeeId;
  $.ajax({
    url: "http://localhost:18081/employees/selectAllByEmployeeId",
    type: "get",
    data: {
      id: employeeId
    },
    success: function(data) {
      console.log(data);
      var employee = data.data;
      $('#editEmpName').val(employee.empName);
      $('#editPosition').val(employee.position);
      $('#editEmail').val(employee.email);
      $('#editPhoneNumber').val(employee.phoneNumber);
      $('#editSalary').val(employee.salary);
      $('#editEmployeeModal').modal('show');
    }
  });
}

// 保存修改
$('#saveChanges').on('click', function() {
  var empName = $('#editEmpName').val();
  var position = $('#editPosition').val();
  var email = $('#editEmail').val();
  var phoneNumber = $('#editPhoneNumber').val();
  var salary = $('#editSalary').val();
  var formDate = new FormData();
  formDate.append('employeeId', updateId);
  formDate.append('empName', empName);
  formDate.append('position', position);
  formDate.append('email', email);
  formDate.append('phoneNumber', phoneNumber);
  formDate.append('salary', salary);

  $.ajax({
    url: "http://localhost:18081/employees/updateEmployee",
    type: "post",
    data: formDate,
    contentType:false,
    processData:false,
    success: function(data) {
      console.log(data);
      alert(data.data);
      $('#editEmployeeModal').modal('hide');
      onloadOk(1, "", "");
    }
  });
});

// 搜索
$('#search').on('click', function(event) {
  event.preventDefault();
  var empName = $('input[placeholder="请填写员工用户名"]').val();
  var phoneNumber = $('input[placeholder="请填写手机号"]').val();
  onloadOk(1, empName, phoneNumber);
});

// 删除
function deleteEmployee(id) {
  alert(id);
  $.ajax({
    url: "http://localhost:18081/employees/deleteByEmployeeId",
    type: "get",
    data: {
      id: id
    },
    success: function(data) {
      console.log(data);
      alert(data.data);
      onloadOk(1, "", "");
    }
  });
}
</script>